<ngm-property-select class="max-w-full"
  [label]="props?.label"
  [formControl]="_formControl"
  [editable]="true"
  [showAttributes]="true"
  [dataSettings]="dataSettings$ | async"
  [entityType]="entityType$ | async"
  [restrictedDimensions]="restrictedDimensions$ | async"
  [coreService]="coreService"
  [dsCoreService]="dsCoreService"
  [capacities]="capacities"
  [syntax]="syntax$ | async"
  displayDensity="compact"
  (calculationChange)="onCalculationChange($event)"
>

  <mat-icon *ngIf="to?.sortable" ngmPrefix cdkDragHandle class="mr-2" displayDensity="compact">drag_indicator</mat-icon>

  <button *ngIf="showChartAttributes && (isDimension$ | async) === true" ngmSuffix mat-icon-button displayDensity="compact"
    [matMenuTriggerFor]="chartMenu"
    #mt="matMenuTrigger"
    [class.active]="mt.menuOpen"
    (click)="$event.stopPropagation();$event.preventDefault();">
    <mat-icon fontSet="material-icons-outlined">analytics</mat-icon>
  </button>

  <button *ngIf="showMeasureStyle && (isMeasure$ | async) === true" ngmSuffix mat-icon-button displayDensity="compact"
    [matMenuTriggerFor]="measureMenu"
    #mt="matMenuTrigger"
    [class.active]="mt.menuOpen"
    (click)="$event.stopPropagation();$event.preventDefault();">
    <mat-icon fontSet="material-icons-outlined">adjust</mat-icon>
  </button>

  <button ngmSuffix class="ngm-formly__remove" *ngIf="removable" displayDensity="compact"
    mat-icon-button color="warn"
    (click)="$event.stopPropagation();$event.preventDefault();killMyself()">
    <mat-icon>clear</mat-icon>
  </button>
</ngm-property-select>

<mat-menu #chartMenu="matMenu" class="ngm-formly ngm-density__compact">
  <button mat-menu-item disableRipple [matMenuTriggerFor]="roleMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">category</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Role' | translate: {Default: 'Role'} }}...</span>
  </button>

  <button mat-menu-item disableRipple (click)="editAttributes()">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">edit_attributes</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.ChartAttributes' | translate: {Default: 'Chart Attributes'} }}...</span>
  </button>

</mat-menu>

<mat-radio-group [(ngModel)]="role">
  <mat-menu #roleMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple *ngFor="let role of DIMENSION_ROLES"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="role.value">
        {{ 'FORMLY.PROPERTY_SELECT.' + role.label | translate: {Default: role.label} }}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-menu #measureMenu="matMenu" class="ngm-formly ngm-density__compact">
  <button mat-menu-item *ngIf="showMeasureRole" disableRipple [matMenuTriggerFor]="measureRoleMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">category</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Role' | translate: {Default: 'Role'} }}...</span>
  </button>

  <button mat-menu-item *ngIf="showMeasureShape" disableRipple [matMenuTriggerFor]="shapeMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">interests</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Shape' | translate: {Default: 'Shape'} }}...</span>
  </button>

  <button mat-menu-item *ngIf="showColorPalette" disableRipple [matMenuTriggerFor]="colorMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">style</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Style' | translate: {Default: 'Style'} }}...</span>
  </button>

  <button mat-menu-item *ngIf="showMeasureReferenceLine" disableRipple (click)="openReferenceLine()">
    <mat-icon class="shrink-0" >trending_flat</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.REFERENCE_LINE' | translate: {Default: 'Reference Line'} }}</span>
  </button>

  <button mat-menu-item *ngIf="showMeasureChartOptions" disableRipple (click)="openChartOptions()">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">analytics</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.ChartOptions' | translate: {Default: 'Chart Options'} }}</span>
  </button>

  <button mat-menu-item *ngIf="showMeasureGridBar" disableRipple (click)="$event.stopPropagation();">
    <mat-checkbox [(ngModel)]="bar">
      <div class="flex-1 flex items-center">
        <mat-icon class="shrink-0" fontSet="material-icons-outlined">sort</mat-icon>
        <span>{{ 'FORMLY.PROPERTY_SELECT.BarChart' | translate: {Default: 'Bar Chart'} }}</span>
      </div>
    </mat-checkbox>
  </button>
  
</mat-menu>

<mat-radio-group [(ngModel)]="role">
  <mat-menu #measureRoleMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple *ngFor="let role of MEASURE_ROLES"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="role.value">
        {{ 'FORMLY.PROPERTY_SELECT.' + role.label | translate: {Default: role.label} }}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-menu #colorMenu="matMenu" class="ngm-formly ngm-density__compact">
  <button mat-menu-item *ngIf="showMeasurePalettePattern" disableRipple [matMenuTriggerFor]="patternMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">texture</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Pattern' | translate: {Default: 'Pattern'} }}</span>
  </button>

  <button mat-menu-item disableRipple [matMenuTriggerFor]="paletteMenu">
    <mat-icon class="shrink-0" fontSet="material-icons-outlined">palette</mat-icon>
    <span>{{ 'FORMLY.PROPERTY_SELECT.Palette' | translate: {Default: 'Palette'} }}</span>
  </button>

  <div mat-menu-item disableRipple class="mat-option-disabled h-16 pt-1" style="height: 4rem;" (click)="$event.stopPropagation()">
    <ngm-colors class="w-60 mt-1" [label]=" 'FORMLY.PROPERTY_SELECT.Colors' | translate: {Default: 'Colors'} "
      [options]="props.colors"
      [(ngModel)]="colors"
      (ngModelChange)="onColorsChange($event)"
      (click)="$event.stopPropagation()">
    </ngm-colors>
  </div>

  <!-- <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
    <mat-checkbox [(ngModel)]="reverse">
      <mat-icon>invert_colors</mat-icon>
      {{ 'FORMLY.PROPERTY_SELECT.Invert' | translate: {Default: 'Invert'} }}
    </mat-checkbox>
  </button> -->
</mat-menu>

<mat-radio-group [(ngModel)]="palette" displayDensity="cosy">
  <mat-menu #paletteMenu="matMenu" class="ngm-formly ngm-density__compact">

    <ng-template matMenuContent>
      <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
        <mat-radio-button class="ngm-radio-button__property" [value]="null">
          {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
        </mat-radio-button>
      </button>
  
      <ng-container *ngFor="let group of interpolateGroups">
        <button mat-menu-item disableRipple disabled>
          {{group.groupName}}
        </button>
  
        <button mat-menu-item disableRipple *ngFor="let interpolate of group.values"
          (click)="$event.stopPropagation();">
          <mat-radio-button [value]="interpolate.name" class="ngm-radio-button__property flex-1 w-full">
            <ngm-chromatic-preview class="flex-1 w-full" [interpolate]="interpolate"></ngm-chromatic-preview>
          </mat-radio-button>
        </button>
      </ng-container>
    </ng-template>
    
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="shapeType">
  <mat-menu #shapeMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button [value]="null">
        {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
      </mat-radio-button>
    </button>
    <button mat-menu-item disableRipple *ngFor="let shape of SHAPE_TYPES"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="shape.value">
        {{ 'FORMLY.PROPERTY_SELECT.' + shape.label | translate: {Default: shape.label} }}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>

<mat-radio-group [(ngModel)]="pattern">
  <mat-menu #patternMenu="matMenu" class="ngm-formly ngm-density__compact">
    <button mat-menu-item disableRipple (click)="$event.stopPropagation();">
      <mat-radio-button [value]="null">
        {{ 'FORMLY.PROPERTY_SELECT.None' | translate: {Default: 'None'} }}
      </mat-radio-button>
    </button>
    <button mat-menu-item disableRipple *ngFor="let item of PATTERNS"
      (click)="$event.stopPropagation();">
      <mat-radio-button [value]="item.value">
        {{item.label}}
      </mat-radio-button>
    </button>
  </mat-menu>
</mat-radio-group>
